<template>
	<view class="out-box">
		<view class="carousel">
			<!-- goodsData：轮播图数据  @setShowVideo：视频按钮点击事件 -->
			<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
				<!-- 预览视频弹窗 -->
				<view class="mask" v-if="showVideo" @touchmove.stop.prevent="ondefault" @click="hideShow">
					<view class="close">
						<image src="../../static/images/close.png"></image>
					</view>
				</view>
				<view class="previewvideo" v-if="showVideo">
					<view class="videos">
						<video class="nowvideos" id="nowVideo" v-if="showVideo" :src="goodsData.videos"
							:autoplay="showVideo" :show-center-play-btn="true" :show-mute-btn="true"
							:show-fullscreen-btn="false"></video>
					</view>
				</view>
				<!-- 用来承载H5预览视频的 -->
				<view style="position: absolute;top: -999rpx;left: -999rpx;">
					<video id="newVideo" ref="newVideo" :src="goodsData.videos" :autoplay="showVideo"
						:show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"
						@fullscreenchange="hideShow"></video>
				</view>
		</view>
		<view class="header">
			<view class="header_title"><span v-if="lists.result.is_swerve == 1" class="span1">急转 | </span>{{ lists.result.title }}</view>
			<view class="header_money">{{(lists.result.rent == null ||lists.result.rent == 0)? '面议':  lists.result.rent }}
				<span v-if="lists.result.rent != null && lists.result.rent != 0" class="span1">元/月</span>
			</view>
			<view v-if="lists.result.feature_label" class="item_right_identifying">
				<view class="item_right_identifying_item" v-for="item1,index1 in lists.result.feature_label.split(',')" :key="index1">
					<view >{{ item1}}</view>
				</view>
			</view>
			<view class="header_information">
				<view class="information_item">
					<view class="item_top">{{lists.result.transfer_fee == null||lists.result.transfer_fee == ''?'面议':  lists.result.transfer_fee + '元' }}</view>
					<view class="item_bottom">转让费</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{lists.result.is_swerve == 1 ?'是':'否' }}</view>
					<view class="item_bottom">是否急转</view>
				</view>
				<view class="information_item" style="border: none;">
					<view class="item_top">{{  lists.result.shop_area}}m²</view>
					<view class="item_bottom">使用面积</view>
				</view>
			</view>
			<view class="header_user">
				<view class="user_item" v-show="lists.result.name">联系人： <span class="span2">{{ lists.result.name }}</span></view>
				<view class="user_item">联系电话： <span class="span2">{{ lists.result.phone }}</span></view>
				<view class="user_item">所属行业或原用途： <span class="span2">{{ (lists.result.shop_type_one?lists.result.shop_type_one+'/':'') + (lists.result.shop_type_two?lists.result.shop_type_two+'/':'')+ (lists.result.shop_type?lists.result.shop_type:'')}}</span></view>
				<view class="user_dotuone" v-show="lists.result.detailed_introduction">
					<view class="user_itemtwo">店铺详情： </view>
					<view class="span2" v-html="lists.result.detailed_introduction"></view>
				</view>
				<view class="user_item">更新时间： <span class="span2">{{ lists.result.update_time !=null? lists.result.update_time :lists.result.create_time}}</span></view>
			</view>
		</view>
		<view class="mian">声明：本信息来自客户提供，如有侵权，请联系平台删除</view>
		
		<view class="showmap">
			<view class="title">店铺位置信息</view>
			<view class="detileAdress">详细地址：<span class="span1">{{ lists.result.detail_address }}</span></view>
			<map v-if='lists.result&&lists.result.location' class="map" :latitude="mapval.latitude" :longitude="mapval.longitude"  
			:markers="mapval.markers" @regionchange="handleRegionChange"
			:show-location="true"
			></map>
		</view>
				
		<view class="bottom">
			<view class="bottom_main">
				<view class="main_right" @tap="towx">去小程序查看电话</view>
				<view class="release" @tap="tosublease()">发布转让信息</view>
			</view>
		</view>
	</view>
		<!-- 跳转到会员的弹框 -->
	<uni-popup ref="popuptovip" :is-mask-click="false" :safe-area="false">
		<view class="popuptopay">
			<view class="icon"></view>
			<view class="cha" @tap="popuptovipclose"></view>
			<view class="text">开通会员，查看联系方式</view>
			<view class="texttwo">还可获取更多会员权益</view>
			<view class="optinlist">
				<view class="optinlistitem" v-for="(item,index) in memberDescription">
					<image class="icons" :src="item.icon"></image>
					<view class="name">{{ item.name }}</view>
					<!-- <view class="details">{{ item.details }}</view> -->
				</view>
			</view>
			<view class="buttom" @tap="tosublease">获取会员权限</view>
		</view>
	</uni-popup>
	<view>
		<Verify
				@success="checkSuccess"
				:mode="'pop'"
				:captchaType="'clickWord'"
				:imgSize="{ width: '330px', height: '155px' }"
				ref="verify"
			></Verify>
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount} from 'vue'
import {onGotApiData,addClick,ongetphone} from '../../util/api.js'
import Verify from "../../components/verify/verify"
// 定义ref
	let newVideo = ref(null) 
	// 从上个页面获取到参数
	const props = defineProps({
			id: String,
		});
		const index_item = props.id
		// const index_item = JSON.parse(decodeURIComponent(props.obj))
		console.log("从上个页面获取到参数11",index_item)
	// 在组件渲染之前执行
	onBeforeMount(() => {
		console.log('组件准备渲染',);
		// user.look_num = uni.getStorageSync('look_num');
		// 判断用了几次
		// if(user.look_num >= 3){
		// 	// 超过三次直接跳转到小程序
		// 	towx()
		// }
		// 调用店铺详细信息的接口
		lists_post()

		newVideo.value = uni.createVideoContext('newVideo');
		console.log('视频对象', newVideo.value)
	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕',);
	});
	// 跳转会员弹框定义的初始值
	const popuptovip = ref(null)

	const openpopuptovip = () =>{
		popuptovip.value.open('center')
	}
	const popuptovipclose = () =>{
		popuptovip.value.close()
	}
// 跳转弹框的图标文字描述
const memberDescription = reactive([
	{
		icon:'../../static/images/分组1.png',
		name:'联系方式',
		details:'服务到成功为止',
	},
	{
		icon:'../../static/images/分组2.png',
		name:'精准匹配',
		details:'平台永久收录展示',
	},
	{
		icon:'../../static/images/分组3.png',
		name:'精准推广',
		details:'24小时自动推广',
	},
	{
		icon:'../../static/images/分组4.png',
		name:'专属客服',
		details:'24小时自动推广',
	},

])
	// 个人详细信息
	let user = reactive({
		user_id:'',
		look_num:0
	})

	  // 店铺详细信息
	let lists = reactive({
			result: {}
		});
		// 请求店铺详细信息接口
	const lists_post = () =>{
		let params = reactive({
			id : index_item
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_transfer/info','GET',params,lists_value)
	}
	// 店铺详细信息请求的结果
	const lists_value = (result) => {
		// 免费访问次数加一
		// console.log("aaa",user.look_num,user.look_num ++) 
		// user.look_num = user.look_num ++
		// uni.setStorageSync('look_num', user.look_num);

		lists.result = result
		console.log('lists_value请求成功',lists.result)
		goodsData.videos = lists.result.videoUrl
		goodsData.imgList = lists.result.imgs
		if(lists.result.location){
			// 使用 split 方法将字符串分割为数组
			const [longitude, latitude] = lists.result.location.split(',');

			mapval.longitude = longitude
			mapval.latitude = latitude

			mapval.markers[0].longitude = longitude
			mapval.markers[0].latitude = latitude
			// 打印结果
			console.log('Longitude:', longitude); // 120.5739
			console.log('Latitude:', latitude);  // 31.276708
		}
	}
	
	// 轮播图相关的变量
	let goodsData = reactive({
		videos: '',
		imgList: [],
	})

	let showVideo = ref(false)
			//操作视频
	const setShowVideo = (isshowVideo, isH5) => {
		    console.log("操作视频",isshowVideo,isH5)
			showVideo.value = true
			// alert('我是isshowVideo' + isshowVideo + 'h5'+ isH5)
			// console.log("视频对象", newVideo.value)
			newVideo.value.play()
			// if (isH5 == true) {
			// 	showVideo.value = isH5
			// 	console.log('视频');
			// 	newVideo.value.play()
			// }
			console.log('视频点击播放');
		}
		// 关闭视频
	const hideShow = () =>{
		console.log("关闭视频")
			showVideo.value = false
		}
		
	// 地图相关变量方法
	const todutu = ()=>{
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				}
		});
	}
	// 点击返回首页
	const toindex = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		});
	}
	// 点击收藏按钮
	const oncollect = () =>{
		addClick('h5_店铺详情','收藏')
		// 先查询有没有登录账号
		if(!user.user_id){
			uni.showToast({
				title: '请先登录...',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 1000
			}) 
			uni.navigateTo({
				url: '/pages/login/login'
			});
			return
		}

		let params = reactive({
			sid : lists.result.id,
			user_id: user.user_id,
			type:1,
			method_type : !lists.result.is_collect
		})
		console.log("params",params)
		onGotApiData('/api/app/collect/update','POST',params)
		// 提示成功
		// uni.showToast({
		// 		title: '收藏成功',
		// 		//将值设置为 success 或者直接不用写icon这个参数
		// 		icon: 'success',
		// 		//显示持续时间为 2秒
		// 		duration: 1600
		// 	}) 

		// 请求结束改变图标颜色
		lists.result.is_collect = !lists.result.is_collect
	}

	// 点击下方发布转租
	const tosublease =() =>{
		popuptovipclose()
		// 设置来源页面标记
		uni.setStorageSync('fromIndex',  true)

		addClick('H5店铺详情','发布转租按钮')
		uni.navigateTo({
			url: '/pages/release_transfer/release_transfer?PublishSource='+"3" + '&indextoxq=' + '详情页进入'
		});
	}
		//初始化验证码组件
	const verify = ref(false)
 
 //验证成功触发
	const checkSuccess=(data)=>{
		
		
		console.log("deadsa",data)
		//验证码验证成功操作
		 verify.value.hide();
		 	// uni.makePhoneCall({
		 	// 	phoneNumber: lists.result.phone 
		 	// });
		 	
		 	// 方法1
		 	let date = new Date();
		 	let year = date.getFullYear();  // 获取当前年份
		 	let month = date.getMonth() + 1;  // 获取当前月份（注意月份从0开始，需要加1）
		 	let day = date.getDate();  // 获取当前日期
		  
		 	console.log(year,month,day);
		 	const newtime = "" +year + month+day
		 	const oldtime = uni.getStorageSync('PPZ_looktime') || ''
		 		
		 	if(newtime == oldtime){
		 		openpopuptovip()
		 	}else{
		 		uni.setStorageSync('PPZ_looktime',"" + year + month + day) 
		 		// 获取手机号
		 		ipone_num_post(data)
		 	}
			//ipone_num_post(data)
	}
	// 点击拨打手机号
	const toipone = () =>{
		//显示验证码
		 verify.value.show('center')
		addClick('H5店铺详情','电话咨询按钮')
	// 	console.log('手机号',lists.result.phone )
	// 	// uni.makePhoneCall({
	// 	// 	phoneNumber: lists.result.phone 
	// 	// });
		
	// 	// 方法1
	// 	let date = new Date();
	// 	let year = date.getFullYear();  // 获取当前年份
	// 	let month = date.getMonth() + 1;  // 获取当前月份（注意月份从0开始，需要加1）
	// 	let day = date.getDate();  // 获取当前日期
 
	// 	console.log(year,month,day);
	// 	const newtime = "" +year + month+day
	// 	const oldtime = uni.getStorageSync('PPZ_looktime') || ''
			
	// 	if(newtime == oldtime){
	// 		openpopuptovip()
	// 	}else{
	// 		uni.setStorageSync('PPZ_looktime',"" + year + month + day) 
	// 		// 获取手机号
	// 		ipone_num_post()
	// 	}

		// 跳转到小程序
		// towx()
	}
	// 跳转到小程序
	const towx = () =>{
		addClick('H5转让详情','去小程序查看电话')
		const link = uni.getStorageSync('link');
		let params = reactive({
			link :  link,
			env_version: 'release'
		})
		console.log("params",params)
		onGotApiData('/api/app/xcx/jump_xcx','GET',params,towx_value)
	}
	// 返回的结果
	const towx_value =(result) =>{
		window.location.href = result.openlink
	}
		// 获取手机号相关的变量方法
	let ipone_num = ref(null);
	const ipone_num_post = (data) =>{
		let params = reactive({
			id :  lists.result.id,
			user_id: user.user_id,
			captchaVerification:data.captchaVerification			
		})
		ongetphone('/h5/api/app/shop_transfer/get_phone','GET',params,ipone_num_value)
	}
	// 店铺详细信息请求的结果
	const ipone_num_value = (result) => {
		console.log('111',result);
		if(result.code!=200){
			uni.showToast({
				title: result.message,
				icon: 'error',
				//显示持续时间为 2秒
				duration: 1000
			}) 
			return;
		}
		console.log('111',result.data);
		ipone_num.value = result.data
		// 拨通手机号
		uni.makePhoneCall({
			phoneNumber: ipone_num.value 
		});
	}	
	// 弹框地图相关内容
	const mapval = reactive({
		formatted_address:'',   // 详细地址
		id:0, // 使用 marker点击事件 需要填写id
		isfb:false, 	// 是否选择位置信息之后直接发布
		title: 'map',
		latitude: 31.249571, 
		longitude: 121.45575, 
		scale: 16,
		markers: [
			{
			id: 1,
			latitude: 31.249571, // 初始Marker的纬度
			longitude: 121.45575, // 初始Marker的经度
			iconPath: '../../static/images/mapmarker.png', // 自定义Marker图标路径
			width: 30, // Marker图标宽度
			height: 30, // Marker图标高度
			//   anchor:{x:5, y: 1}
			},
		],
		})
</script>

<style lang="scss" scoped>
	.out-box{
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		font-family: '思源黑体';
		overflow: hidden;
		background-color: rgba(246, 247, 251, 1);
		width: 750rpx auto;
		.carousel{
			width: 750rpx;
			// height: 100rpx;
			margin: 0 auto;
			.swiper-item{
				width: 740rpx;
				height: 330rpx;
				.imageone{
					width: 740rpx;
					height: 100%;
					background-size: cover;
				}
			}
		}
		.header{
			width: 710rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.header_title{
				width: 680rpx;
				margin: 0 auto;
				padding-top: 30rpx;
				color:#333333 ; 
				font-family: PingFang SC-Medium;
				line-height: 56rpx;
				font-size: 36rpx;
				text-indent:20rpx; 
				font-weight: 600;
				.span1{
					color: rgba(0, 92, 241, 1);
				}
			}
			.header_money{
				// width: 690rpx;
				display: inline-block;
				height: 50rpx;
				padding: 6rpx 30rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 38rpx;
				background-color: rgba(0, 92, 241, 0.10);
				border-radius: 30rpx;
				font-weight: 600;
				color: rgba(0, 92, 241, 1);
				line-height: 47rpx;			
				.span1{
					// color: rgba(255, 87, 51, 1);
					font-size: 28rpx;
				}
			}
			.item_right_identifying{
				width:700rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				.item_right_identifying_item{
					height: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 30rpx;
					padding: 5rpx 10rpx 5rpx 10rpx;
					color: rgba(0, 92, 241, 1);
					margin:16rpx 0 0rpx 14rpx;
					text-align: center;
					border: 1px solid rgba(0, 92, 241, 1);
					border-radius: 20rpx;
				}
			}
			.header_information{
				width: 660rpx;
				height: 120rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				border-radius: 12rpx;
				background-color: rgba(166, 166, 166, 0.10);
				display: flex;
				flex: 1;
				.information_item{
					width: 220rpx;
					height: 80rpx;
					font-size: 26rpx;
					margin-top: 20rpx;
					border-right: 1px solid rgba(0, 0, 0, 0.08);
					text-align: center;
					.item_top{
						width: 220rpx;
						height: 44rpx;
						line-height: 38rpx;
						font-weight: 700;
						font-size:24rpx;
						color:rgba(0, 92, 241, 1);
						overflow: hidden;
					}
					.item_bottom{
						width: 220rpx;
						height: 36rpx;
						font-size: 22rpx;
						margin-top: 8rpx;
						font-weight: 400;
						color: rgba(137, 137, 137, 1) ;
						line-height: 30rpx;
						// background-color: rgb(149, 127, 101);
					}
				}
			}
			.header_user{
				width: 660rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				margin: 0 auto;
				margin-top: 20rpx;

				.user_dotuone{
					width: 660rpx;
					.user_itemtwo{
						width: 700rpx;
						margin-top: 10rpx;
						height: 50rpx;
						font-size: 22rpx;
						font-weight: 600;
						color: rgba(137, 137, 137, 1);
						line-height: 50rpx;
					}
					.span2{
						width: 680rpx;
						margin: 0 auto;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						color: rgba(0, 0, 0, 1);
						font-weight: 500;
						font-size: 24rpx;
						line-height: 44rpx;
					}
				}
				.user_item{
					width: 660rpx;
					height: 50rpx;
					font-size: 22rpx;
					font-weight: 600;
					color: rgba(137, 137, 137, 1);
					line-height: 50rpx;
					.span2{
						color: #000;
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}
		} 
		.mian{
			width: 740rpx;
			height: 100rpx;
			margin: 0 auto;
			font-size: 24rpx;
			line-height: 100rpx;
			text-align: center;
			color: rgba(188, 188, 188, 1);
			font-size: 20rpx;
		}
		.showmap{
			width: 710rpx;
			// height: 534rpx;
			padding-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-bottom: 140rpx;
			.title{
				width: 650rpx;
				height: 100rpx;
				margin: 0 auto;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				font-size: 28rpx;
				color: #000000;
				line-height: 100rpx;
			}
			.detileAdress{
				width: 650rpx;
				font-size: 22rpx;
				color: rgba(137, 137, 137, 1);
				line-height: 80rpx;
				margin: 0 auto;
				.span1{
					font-size: 24rpx;
					color: #000000;
				}
			}
			.map{
				width: 650rpx;
				height: 320rpx;
				margin: 0 auto;
			}


		}

		.bottom{
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			z-index: 9999;
			background-color: #fff;
			.bottom_main{
				width: 740rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				.release{
					width: 340rpx;
					height: 90rpx;
					margin: 15rpx 0 0 0rpx;
					background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
					border-radius: 20rpx;
					text-align:center;
					color: #fff;
					line-height: 90rpx;
				}
				.main_right{
					width: 340rpx;
					height: 90rpx;
					text-align: center;
					margin: 15rpx 0 0 0rpx;
					background-color: #fff;
					border: 1px solid rgba(0, 92, 241, 1);
					color: rgba(0, 92, 241, 1);
					border-radius: 20rpx;
					line-height: 90rpx;
				}
			}
		}
	}
	// 轮播图相关的穿透
	:deep(.out-box .carousel){
		height: 410rpx; 
	}
		/* 预览视频弹窗 */
	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .8);
		z-index: 200;
	}

	.previewvideo {
		width: 100vw;
		height: 100vw;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background-color: #000;
		z-index: 900;
		opacity: 1;
	}

	.close {
		display: flex;
		align-content: center;
		align-items: flex-end;
		position: absolute;
		top: 140rpx;
		right: 20rpx;
		z-index: 900;

		image {
			width: 50rpx;
			height: 50rpx;
			display: block;
			justify-content: center;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 50%;
			padding: 10rpx;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.videos {
		height: 100vw;
		width: 100vw;
		z-index: 10;
		position: relative;

		video {
			width: 100%;
			height: 100%;
		}
	}
	.nowvideos {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	.popuptopay{
		width: 660rpx;
		height: 560rpx;
		border-radius: 10px;
		// margin: 0 auto;
		background: linear-gradient(0deg, rgba(252, 246, 240, 1) 0%, rgba(252, 230, 207, 1) 89.58%, rgba(250, 211, 172, 1) 100%);

		// background: linear-gradient(180deg, rgba(252, 246, 240, 1) 0%, rgba(252, 230, 207, 1) 50%, rgba(250, 211, 172, 1) 100%);
		box-shadow: 0px 2px 4px  rgba(217, 214, 254, 1);
		position: relative;
		// left: 26px;
		.icon{
			width: 300rpx;
			height: 240rpx;
			background: url(../../static/images/hunagguan.png);
			background-size: 100% 100%;
			position: absolute;
			top: -180rpx;
			left: 180rpx;
		}
		.cha{
			width: 68rpx;
			height: 68rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 295rpx;
			top: 570rpx;
		}
		.text{
			width: 580rpx;
			height:100rpx;
			font-size: 44rpx;
			line-height: 70rpx;
			font-family: '阿里妈妈数黑体';
			font-weight: 900;
			color: rgba(135, 73, 83, 1);
			text-align: center;
			position: absolute;
			top: 70rpx;
			left: 50rpx;
		}
		.texttwo{
			width: 580rpx;
			height:60rpx;
			font-size: 26rpx;
			line-height: 60rpx;
			font-family: '阿里妈妈数黑体';
			font-weight: 500;
			color: rgba(82, 82, 82, 1);
			text-align: center;
			position: absolute;
			top: 140rpx;
			left: 50rpx;
		}
		.optinlist{
			width: 680rpx;
			height: 300rpx;
			display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			border-radius: 10rpx;
			position: absolute;
			top: 240rpx;
			left: 10rpx;
			.optinlistitem{
				width: 160rpx;
				height: 140rpx;
				// background-color: pink;
				// border: 1px solid black;
				position: relative;
				.icons{
					width: 75rpx;
					height: 75rpx;
					position: absolute;
					top: 10rpx;
					left: 50rpx;
				}
				.name{
					width: 160rpx;
					height: 30rpx;
					font-size: 26rpx;
					text-align: center;
					position: absolute;
					top: 100rpx;
					font-weight: 400;
					line-height: 30rpx;
					color: rgba(212, 48, 48, 1);

				}
				.details{
					width: 190rpx;
					height: 30rpx;
					font-size: 22rpx;
					text-align: center;
					position: absolute;
					top: 136rpx;
					// left: 50rpx;
					color: rgba(181, 143, 143, 1);
				}
			}
		}
		.buttom{
			width: 540rpx;
			height: 70rpx;
			background-color: rgba(255, 87, 51, 1);
			position: absolute;
			top: 460rpx;
			left: 60rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			line-height: 70rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
</style>
